<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>点餐系统</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.zxxbox.3.0.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript" src="js/tablecloth.js"></script>
<!--显示内容请修改jquery.contactable.JS文件-->
<script type="text/javascript" src="js/jquery.mydishes.js"></script>
<link rel="stylesheet" href="css/myDishes.css" type="text/css">
<link rel="stylesheet" href="css/dialog.css" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/menu.css" type="text/css">
<link href="css/list.css" rel="stylesheet" type="text/css" />
</head>

<body onLoad="startclock()">
<div class="main" style="background-image: url(images/bg.gif);">
<div class="entry_box">
<div style="float: left;"><img src="images/logo.bmp"></div>
<div id="trbar">
<div
	style="float: left; margin-left: 5px; color: red; height: 35px; width: 80px;">
<div
	style="float: left; margin-left: 15px; margin-top: 5px; color: red; text-align: center; line-height: 25px;font-weight: bold"
	id="tableName"></div>
</div>
<div id="topnav">
<div id="search_box"> 
<input type="text" id="s" value="" class="swap_value" /> 
<input type="image" src="images/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" onclick="search();" /> 
</div> 

</div>
<div style="float: left; margin-top: 10px; padding-left: 10px"
	id="times"></div>
<div style="float: left; padding-left: 20px"><a href="index.html"><img
	src="images/back.png" alt="返回" title="返回" /></a></div>
<i class="lt"></i> <i class="rt"></i> <i class="lb"></i> <i class="rb"></i>
</div>
</div>

<div class="menuTabs">
<div id="menu">
<ul class="menu">	
        
</ul>
</div>
</div>


<div style="float: left; margin-top: 5px; width: 620px; height: 300px;">
<div
	style="float: left; left: 30px; border: 1px solid #ccc; width: 600px; height: 300px; position: relative;overflow:hidden">
<div
	style="position: absolute; width: 600px; height: 300px; z-index: 90;overflow:hidden"
	id="listItem1"></div>
<div
	style="position: absolute; left: 604px; width: 600px; height: 300px; z-index: 90; top: -1px;overflow:hidden"
	id="listItem2"></div>

<i class="lt" style="z-index: 91;"></i> <i class="rt"
	style="z-index: 91;"></i> <i class="lb" style="z-index: 91;"></i> <i
	class="rb" style="z-index: 91;"></i></div>
</div>
<div id="myDishes"></div>

<!--dock menu JS options --> <script type="text/javascript">
	var currPage = 1;
	var total = 0;
	var size = 8;
	var currPageUrl = '';
	var currPageParam = '';
	var tableId = GetQueryString("tableId");
	var uid = GetQueryString("uid");
    var moveFlag = true;

	
	var baseUrl=urlIP;
	var dcxtUrl=baseUrl+"/dcxt/db/getDishes.action";
	var menuUrl=baseUrl+"/dcxt/db/getMenu.action";
	var searchUrl=baseUrl+"/dcxt/db/getName.action";
	var preOrderUrl=baseUrl+"/dcxt/db/seldishes.action";
	var myTmpListUrl=baseUrl+"/dcxt/db/gettmplist.action";
	var myOrderListUrl=baseUrl+"/dcxt/db/myList.action";
	var cancelPreOrderUrl=baseUrl+"/dcxt/db/removeOrder.action";
	var orderUrl=baseUrl+"/dcxt/db/order.action";
	// 推荐
	var recomendUrl=baseUrl+"/dcxt/db/getRecommend.action";
	// 口碑
	var topUrl=baseUrl+"/dcxt/db/getTop.action";
	// 特价
	var rateUrl=baseUrl+"/dcxt/db/getRate.action";

	var acss="url(images/selected-right-sub.png)  no-repeat right -1px";
	var spancss="url(images/selected-left-sub.png) no-repeat 0  -3px";
	$(document).ready(
		function(){
		   // 得到菜单
		     $("#tableName").html(tableId+"桌");
		     //我的预选
		    getData(processSelect,myTmpListUrl,'tableId='+tableId+'&currentPage='+page+'&size='+limit);
			getData(processMenu,menuUrl,null);
			// 得到推荐列表
		    getDishesByMenuId('recommend','#lirecommend', '');
         	$('#myDishes').contactable({
	 			subject: ''
	 		});
	 		
		});
	function  processMenu(json){
		var list = json.data;		
		getData(parseDishesItem,recomendUrl,'currentPage='+currPage+'&size='+size);	
		$(".menu").html();
		var li="";
		// 推荐
		 li += "<li><a href=\"javascript:getDishesByMenuId('recommend', '',0)\"><span>推荐</span></a></li>";
		for(var i=0;i<list.length;i++){		
			 var index= parseInt(i)+parseInt(1);	  
              li += "<li><a href=\"javascript:getDishesByMenuId('type',"+list[i].id+" ,"+index+")\"><span>"+list[i].name+"</span></a> </li>"
			}

		var len = 0;
		if(list.length==0){len =1;}else{len = list.length+1;}

		var last = parseInt(len)+parseInt(1);
		
		// 特价
		li +="<li ><a href=\"javascript:getDishesByMenuId('rate','',"+len+")\"><span>特价</span></a></li>";
		// 口碑
		li +="<li  class = 'last'><a href=\"javascript:getDishesByMenuId('top','',"+last+")\"><span>口碑</span></a></li>";
		$(".menu").html(li);		
        //menu start
		var a =  $(".menu li a");
		var span =  $(".menu li a span");
 	    $(a[0]).css({"background":acss});
 	    $(span[0]).css({background:spancss}); 

 	    // menu stop
	} 
	
	//获取菜  this.parentNode
	  function getDishesByMenuId(actionType,typeId,lid){
        //set menu css
		var a =  $(".menu li a");
		var span =  $(".menu li a span");
		 for(var i = 0;i<a.length;i++){
			 $(a[i]).css({"background":""});
	         $(span[i]).css({"background":""});
		 }
		 $(a[lid]).css({"background":acss});	   
		 $($(a[lid]).find("span")).css({"background":spancss});
		//set menu css end   
		var reqUrl = "";
		var param = "";
		param='typeId='+typeId;
		if(actionType=='type'){
			reqUrl=dcxtUrl;
			param='typeId='+typeId;
		}else if(actionType=='top'){// 口碑
			reqUrl=topUrl;
		}else if(actionType=='recommend'){// 推荐
			reqUrl=recomendUrl;
		}else if(actionType=='rate'){// 特价
			reqUrl=rateUrl;
		}
		// 设置当前的翻页url和翻页参数
		setPageParam(reqUrl,param);
		getData(parseDishesItem,reqUrl,param+'&currentPage='+currPage+'&size='+size);  
	}
	
	var timerID = null;
	var timerRunning = false;
	function stopclock (){
		if(timerRunning)
			clearTimeout(timerID);
		timerRunning = false;
	}
	function startclock () {
		stopclock();
		showtime();
	}
	function showtime () {
		var now = new Date();
		var hours = now.getHours();
		var minutes = now.getMinutes();
		var seconds = now.getSeconds()
		var timeValue = "" +((hours >= 12) ? "下午 " : "上午 " )
		timeValue += ((hours >12) ? hours -12 :hours)
		timeValue += ((minutes < 10) ? ":0" : ":") + minutes
		timeValue += ((seconds < 10) ? ":0" : ":") + seconds
		document.getElementById("times").innerHTML ="现在是:"+timeValue;
		timerID = setTimeout("showtime()",1000);
		timerRunning = true;
	}

      var index=0;
	function showBigImg(item){    
	index=0;
		var items = item.split(",");
		var disheId=items[0];
		var dishesName=items[1];
		var bigPic=items[2];
		var dishesPrice=items[3];
		var time=items[4];
		var recommend=items[5];	
		var rate=items[6];
		var dishesTaste=items[7];
		var parent = this.parentNode;
		var $parent=$(parent); //jQuery对象
		var result = "";
		$("#inline").remove();
		var inlineContent="<div style='display:none;float:left;overflow:hidden;width:600px;background:#fff' id='inline'><div style='float:left;margin-right:10px'><img src='"+ bigPic+"' rel='sss' title='' width='350' height='300' onclick=\"hide();\" ></img></div><div style='float:left;margin-top:10px;overflow:hidden;'>";
		inlineContent+="<strong>"+dishesName+"</strong>";
		inlineContent+="<div style='height:120px;font-size:14'>";
		inlineContent+="<br>口味："+dishesTaste;
		inlineContent+="<br>时长：大约需要 <span style='color:red;font-size:14'>"+time+"</span> 分钟";
		inlineContent+="<br>价格：<span style='color:red;font-size:14'><strong>"+dishesPrice+"</strong></span>元/份";
		if(recommend==1)
			inlineContent+="<br>推荐菜";
		if(rate-1!=0){
			inlineContent+="<br>折扣：<span style='color:red;font-size:14'><strong>"+rate*10+"</strong></span>折";
		}
		inlineContent+="</div>";
		inlineContent+="<div style='height:35px;font-size:10;margin-bottom:10px'>";
		inlineContent+="<div style='float:left;height:35px;width:80px;font-size:12px;line-height:35px;cursor:pointer;text-align:center;background:url(images/btn_bg.png) no-repeat;' onclick='preOrderIndex(\""+item+"\");'>点  菜</div>";
		inlineContent+="<div id='close'  onClick='hide()' style='float:left;margin-left:13px;height:35px;width:80px;background:url(images/btn_bg.png) no-repeat;font-size:12px;line-height:35px;text-align:center;cursor:pointer'>关  闭</div></div>";
		inlineContent+="<div id='disheInfo' style='color:red;font-size:14px;width:200px;padding-top:20px;'>&nbsp;<div>";
		inlineContent+="</div>";
		$(inlineContent).appendTo("body");
		$("#inline").zxxbox();
		$.zxxbox.bgHide();
	}
            
	function hide(){
		$("#inline").remove();
		$.zxxbox.hide(); 
        return false; 
	}	

	
	function setInfo(msg,index){
	 $("#disheInfo").html(msg);
	 $(index).css({display:"block"});
	
	}
	

	function preOrderIndex(item){
	     index++;
		var num=1;
		var disheId=item.split(",")[0];
		var dishesName=item.split(",")[1];
		var bigPic=item.split(",")[2];
		var dishesPrice=item.split(",")[3];
		if(num>0){
			getData(refreshMyList,preOrderUrl,'did='+disheId+'&dname='+dishesName+"&price="+dishesPrice+"&count="+num+"&tableId="+tableId);
		}
		
		setInfo("预选<span id='fenshu'>"+index+"</span>份<"+dishesName+">成功<br><br><a  href='#' onclick='canlcePreOederIndex("+disheId+",1);'>删除预选</a>","#g"+disheId+"");
	}
	
	function canlcePreOederIndex(id,count){
	    index--;
	    getData(refreshMyList,cancelPreOrderUrl,'tableId='+tableId+'&did='+id+'&count='+count);
		if(index==0){
		   $("#disheInfo").html(""); 
		}else{
		  $("#fenshu").html(index); 
		}
	}
	
	function preOrder(item){
		var num=1;
		var disheId=item.split(",")[0];
		var dishesName=item.split(",")[1];
		var bigPic=item.split(",")[2];
		var dishesPrice=item.split(",")[3];
		if(num>0){
			getData(OrderRefreshList,preOrderUrl,'did='+disheId+'&dname='+dishesName+"&price="+dishesPrice+"&count="+num+"&tableId="+tableId);
		}	
	}


     var selectList ;
     function processSelect(json){
    	 selectList = json.data;
        }

	/**  处理菜单数据    **/
	function parseDishesItem(json){
		total = json.totalPage;
		var list = json.data;
		var listData = "";	
		var display="none"; 
		for(var i=0;i<list.length;i++){
			var item = list[i];
			var str = "";
			str+=item.dishesId+",";
			str+=item.dishesName+",";
			str+=item.bigPic+",";
			str+=item.dishesPrice+",";
			str+=item.cookTime+",";
			str+=item.recommendFlag+",";
			str+=item.specialRate+",";
			str+=item.taste.name+",";  
			if(selectList!=null){
			  for(var j=0;j<selectList.length;j++){
                  if(item.dishesId==selectList[j].dishesId)      {
                	  display = "block"
                      break;
                  }else{
                	  display = "none";
                    }
              }		
			}	
            //预选或者下单都要显示 勾选图片			
			listData += "<div class='dishesItem'><div id='g"+item.dishesId+"' style='position:absolute; z-index:105;display:"+display+"'><img src='images/check.png' /></div><div style='margin-right:10px'><img id='dishesImg' src='"+item.bigPic+"' onClick='showBigImg(\""+str+"\")' class='dishesItemImg'/></div><span id='dishesName' style='margin-left:5px;'>"+item.dishesName+"</span>";
			listData += "<span id='dishesPrice' style='margin-left:5px;'>"+item.dishesPrice+"</span>元/例 ";
			//listData += "<span id='recommendFlag'	style='margin-left:10px;'>"+item.recommendFlag+"</span><span id='specialRate'>"+item.specialRate+"</span>折";
            listData+="</div>";
			}
		var listItem = "#listItem";
		if(currPage % 2==0){
			listItem+="2";
		}else{
			listItem+="1";
		}
		$(listItem).html(listData);
		if(currPage<=1){
			$("#prePage").hide();
		}else{
			$("#prePage").show();
		}
		if(currPage<total){
			$("#nextPage").show();
		}else{
			$("#nextPage").hide();
		}
	}	

	/**  处理Action返回    **/
	function parseAction(json){
		var success = json.success;
		if(success){
			alert("成功");
		}else{
			alert("失败");
		}
	}	
	
	function nextPg(){
		if(currPage<total){
			currPage++;
			$("#prePage").show();
			getData(parseDishesItem,currPageUrl,currPageParam+'&currentPage='+currPage+'&size='+size);
			moveToLeft();
		}else{
			$("#nextPage").hide();
		}
	}

	function prePg(){
		if(currPage>1){
			currPage--;
			$("#nextPage").show();
			getData(parseDishesItem,currPageUrl,currPageParam+'&currentPage='+currPage+'&size='+size);
			moveToRight();
		}else{
			$("#prePage").hide();
		}
	}

	function search(){
		reset();
		var searchTxt = $("#q").val();
		// 设置当前的翻页url和翻页参数
		setPageParam(searchUrl,'name='+searchTxt);
		getData(parseDishesItem,currPageUrl,currPageParam+'&currentPage='+currPage+'&size='+size);

	};

	function setPageParam(pageUrl,pageParam){
		// 设置当前的翻页url
		currPageUrl = pageUrl;
		// 设置当前的翻页参数
		currPageParam = pageParam;
	}

	function moveToLeft(){
		var showItem = "listItem";
		var hideItem = "listItem";
		if(currPage % 2==0){
			showItem+="2";
			hideItem+="1";
		}else{
			showItem+="1";
			hideItem+="2";
		}
		
		var showList=document.getElementById(showItem);
		var hideList=document.getElementById(hideItem);
		
		var showPos = {left:hideList.offsetLeft};
		var tmpPos = {left:hideList.offsetLeft+hideList.offsetWidth};
		var hidePos = {left:hideList.offsetLeft-hideList.offsetWidth-100};
		
		correctPos(showItem,tmpPos);
		// 移动
		move(hideList,hidePos,showList,showPos);
		
	}

	// 重置页码和显示数据
	function reset(){
		// 清空两个list的内容
		$("#listItem1").html('');		
		$("#listItem2").html('');
		var currShowItem = "listItem";
		if(currPage % 2==0){
			currShowItem+="2";
		}else{
			currShowItem+="1";
		}
		var list1=document.getElementById("listItem1");
		var list2=document.getElementById("listItem2");
		var currShowList=document.getElementById(currShowItem);
		var showPos = {left:currShowList.offsetLeft};
		var hidePos = {left:currShowList.offsetLeft+currShowList.offsetWidth};
		// 矫正两个list的位置，第一个在左边，第二个隐藏在右边
		correctPos(list1,showPos);
		correctPos(list2,hidePos);
		// 重置总记录数和页码
		total = 0;
		currPage = 1;
	}

	function moveToRight(){
		var showItem = "listItem";
		var hideItem = "listItem";
		if(currPage % 2==0){
			showItem+="2";
			hideItem+="1";
		}else{
			showItem+="1";
			hideItem+="2";
		}
		
		var showList=document.getElementById(showItem);
		var hideList=document.getElementById(hideItem);
		
		var showPos = {left:hideList.offsetLeft};
		var tmpPos = {left:hideList.offsetLeft-hideList.offsetWidth};
		var hidePos = {left:hideList.offsetLeft+hideList.offsetWidth+100};
		
		correctPos(showList,tmpPos);
		// 移动
		move(hideList,hidePos,showList,showPos);
	
	}

	function move(element, position,element2, position2, speed, callback){//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10
		if(typeof(element)=='string')element=document.getElementById(element);
		if(!element.effect){
			element.effect = {};
			element.effect.move=0;
		}
		if(typeof(element2)=='string')element2=document.getElementById(element2);
		if(!element2.effect){
			element2.effect = {};
			element2.effect.move=0;
		}
		
		clearInterval(element.effect.move);
		var speed=speed||15;
		var start=(function(elem){
			var posi = {left:elem.offsetLeft, top:elem.offsetTop};
			while(elem = elem.offsetParent){
				posi.left += elem.offsetLeft;
				posi.top += elem.offsetTop;
			};
			return posi;
		 })(element);
		 var start2=(function(elem){
			var posi = {left:elem.offsetLeft, top:elem.offsetTop};
			while(elem = elem.offsetParent){
				posi.left += elem.offsetLeft;
				posi.top += elem.offsetTop;
			};
			return posi;
		 })(element2);
		element.style.position = 'absolute';
		element2.style.position = 'absolute';
		var style = element.style;
		var style2 = element2.style;
		var styleArr=[];
		var styleArr2=[];
		if(typeof(position.left)=='number'){
			styleArr.push('left');
			styleArr2.push('left');
		}
		if(typeof(position.top)=='number'){
			styleArr.push('top');
			styleArr2.push('top');
		}
		element.effect.move = setInterval(function(){
			for(var i=0;i<styleArr.length;i++){
				// 移动第一个
				start[styleArr[i]] += (position[styleArr[i]] - start[styleArr[i]]) * speed/100;
				style[styleArr[i]] = start[styleArr[i]] + 'px';
				// 移动第二个
				start2[styleArr2[i]] += (position2[styleArr2[i]] - start2[styleArr2[i]]) * speed/100;
				style2[styleArr2[i]] = start2[styleArr2[i]] + 'px';
			}
			for(var i=0;i<styleArr.length;i++){
				if(Math.round(start[styleArr[i]]) == position[styleArr[i]]){
					if(i!=styleArr.length-1)
						continue;
				}else{
					break;
				}
				for(var i=0;i<styleArr.length;i++){
					style[styleArr[i]] = position[styleArr[i]] + 'px';
					style2[styleArr2[i]] = position2[styleArr2[i]] + 'px';
				}
				
				moveFlag = true;
				clearInterval(element.effect.move);
				if(callback)
					callback.call(element);
			}
		}, 10);
	};

	// 矫正位置
	function correctPos(element, position){
		$(element).hide();
		if(typeof(element)=='string')
			element=document.getElementById(element);
		if(!element.effect){
			element.effect = {};
			element.effect.move=0;
		}
		clearInterval(element.effect.move);
		var speed=speed||10;
		var start=(function(elem){
			var posi = {left:elem.offsetLeft, top:elem.offsetTop};
			while(elem = elem.offsetParent){
				posi.left += elem.offsetLeft;
				posi.top += elem.offsetTop;
			};
			return posi;
		 })(element);
		
		element.style.position = 'absolute';
		var style = element.style;
		var styleArr=[];
		if(typeof(position.left)=='number'){
			styleArr.push('left');
		}
		if(typeof(position.top)=='number'){
			styleArr.push('top');
		}
		for(var i=0;i<styleArr.length;i++){
			start[styleArr[i]] += position[styleArr[i]] - start[styleArr[i]];
			style[styleArr[i]] = start[styleArr[i]] + 'px';
		}
		$(element).show();
	}
		
	var myDishesMinX=0;
    	//我的菜单  x轴范围
    var myDishesMax=600;
	 
	var dishesListMinX=0; // 菜单列表
	var dishesListMaxX=630;
	var postionY=[80,380]; //Y轴范围 
	
	
	function slideJS(direction,x,y){
	       if(isOpenDishes){
		    //打开菜单
		    if(myDishesMinX<x<myDishesMax &&  postionY[0]<y <postionY[1] ){
			   if(direction=="up"){
			      _upp();
			   }else if(direction=="down"){
			       _downn();
			   }else if(direction=="left"){		
			      //关闭菜单
			  	    //$('#dishesBox').animate({"marginLeft": "-=600px"}, "slow");
					//$("#btnMydishes").css("background","url(./images/scrl_right.png) no-repeat"); 
					//isOpenDishes = false;
					$("#btnMydishes").click();
			   }
			
			} 
		   }else{
		        if(dishesListMinX<x<dishesListMaxX &&  postionY[0]<y <postionY[1] ){
                   // if(!moveFlag){return;}
                   //  moveFlag= false;
				    if(direction=="up" || direction=="right"){
					 prePg();
					}else  if(direction=="down" || direction=="left"){
					 nextPg();
					}
				}
		   
		   }
	
	
	
	}
	
	
	
	
</script>
</body>
</html>